<template>
	<view class="dean_room">
		<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 48rpx);">
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>数据统计</text>
					<view class="flex" style="align-items: center;">
						<view class="select_info m-r-10">
							近7天
							<u-icon name="arrow-down"></u-icon>
						</view>

					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/mzsrb.svg')" alt="" />门诊收入占医疗收入比例

					</view>
					<view class="progressBox">
						<progress-circle :percent="mzsrzbStat" :size="240" progressColor="#4E79ED" id='a'>
							<view class="centerTxt">

								<view class="txt">
									门诊收入占比
								</view>
								<view class="num blue">
									{{mzsrzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10" :class="[mzsrzb.tb && mzsrzb.tb.indexOf('-') > -1 ? 'down' : '']">{{mzsrzb.tb && mzsrzb.tb.indexOf('-') > -1 ? '' : "+"}}{{mzsrzb.tb}} </text> 
						<!-- 环比<text class="card_sub" :class="[mzsrzb.hb && mzsrzb.hb.indexOf('-') > -1 ? 'down' : '']">{{mzsrzb.hb && mzsrzb.hb.indexOf('-') > -1 ? '' : "+"}}{{mzsrzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/mzsrb.svg')" alt="" />门诊收入中来自医保基金的比例

					</view>
					<view class="progressBox">
						<progress-circle :percent="mzsrybzbStat" :size="240" progressColor="#4E79ED" id='b'>
							<view class="centerTxt">

								<view class="txt">
									门诊收入占比
								</view>
								<view class="num blue">
									{{mzsrybzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10" :class="[mzsrybzb.tb && mzsrybzb.tb.indexOf('-') > -1 ? 'down' : '']">{{mzsrybzb.tb && mzsrybzb.tb.indexOf('-') > -1 ? '' : "+"}}{{mzsrybzb.tb}} </text> 
						<!-- 环比<text class="card_sub" :class="[mzsrybzb.hb && mzsrybzb.hb.indexOf('-') > -1 ? 'down' : '']">{{mzsrybzb.hb && mzsrybzb.hb.indexOf('-') > -1 ? '' : "+"}}{{mzsrybzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/zysr.svg')" alt="" />住院收入占医疗收入比例

					</view>
					<view class="progressBox">
						<progress-circle :percent="zysrzbStat" :size="240" progressColor="#ED6969" id='c'>
							<view class="centerTxt">

								<view class="txt">
									住院收入占比
								</view>
								<view class="num">
									{{zysrzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10" :class="[zysrzb.tb && zysrzb.tb.indexOf('-') > -1 ? 'down' : '']">{{zysrzb.tb && zysrzb.tb.indexOf('-') > -1 ? '' : "+"}}{{zysrzb.tb}} </text> 
						<!-- 环比<text class="card_sub" :class="[zysrzb.hb && zysrzb.hb.indexOf('-') > -1 ? 'down' : '']">{{zysrzb.hb && zysrzb.hb.indexOf('-') > -1 ? '' : "+"}}{{zysrzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/zysr.svg')" alt="" />住院收入占来自医保基金的比例

					</view>
					<view class="progressBox">
						<progress-circle :percent="zysrybzbStat" :size="240" progressColor="#ED6969" id='d'>
							<view class="centerTxt">

								<view class="txt">
									住院收入占比
								</view>
								<view class="num h">
									{{zysrybzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10" :class="[zysrybzb.tb && zysrybzb.tb.indexOf('-') > -1 ? 'down' : '']">{{zysrybzb.tb && zysrybzb.tb.indexOf('-') > -1 ? '' : "+"}}{{zysrybzb.tb}} </text>
						 <!-- 环比<text class="card_sub" :class="[zysrybzb.hb && zysrybzb.hb.indexOf('-') > -1 ? 'down' : '']">{{zysrybzb.hb && zysrybzb.hb.indexOf('-') > -1 ? '' : "+"}}{{zysrybzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/ylfw.svg')" alt="" />医疗服务收入(不含药品、耗材、检查检验收入)占医疗收入的比例

					</view>
					<view class="progressBox">
						<progress-circle :percent="ylfwsrzbStat" :size="240" progressColor="#F29C66" id='e'>
							<view class="centerTxt">

								<view class="txt">
									医疗服务收入占比
								</view>
								<view class="num red">
									{{ylfwsrzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10" :class="[ylfwsrzb.tb && ylfwsrzb.tb.indexOf('-') > -1 ? 'down' : '']">{{ylfwsrzb.tb && ylfwsrzb.tb.indexOf('-') > -1 ? '' : "+"}}{{ylfwsrzb.tb}} </text> 
						<!-- 环比<text class="card_sub" :class="[ylfwsrzb.hb && ylfwsrzb.hb.indexOf('-') > -1 ? 'down' : '']">{{ylfwsrzb.hb && ylfwsrzb.hb.indexOf('-') > -1 ? '' : "+"}}{{ylfwsrzb.hb}}</text> -->
					</view>

				</view>
				<!-- <view class="echarts_room"> 
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/ryzc.svg')" alt="" />人员支出占业务支出比重

					</view>
					<view class="progressBox">
						<progress-circle :percent="80" :size="240" progressColor="#00BFB8" id='f'>
							<view class="centerTxt">

								<view class="txt">
									人员支出占比
								</view>
								<view class="num red">
									80<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10">+2.13% </text> 环比<text class="card_sub down">+2.13%</text>
					</view>

				</view>-->
			</view>
			<!-- 
			<view class="jb_room m-b-16">
				<view class="jb_item blue">
					<view class="jb_title m-b-20">万元收入<br />能耗支出</view>
					<view class="jb_info">3065 <text class="jb_sub">万元</text></view>
					<img class="jb_img" :src="require('@/static/images/wysr.png')" alt="">
				</view>
				<view class="jb_item red">
					<view class="jb_title m-b-20">收入结余</view>
					<view class="jb_info">3065 <text class="jb_sub">万元</text></view>
					<img class="jb_img" :src="require('@/static/images/srjy.png')" alt="">
				</view>
				<view class="jb_item green">
					<view class="jb_title m-b-20">资产负债率</view>
					<view class="jb_info">3065 <text class="jb_sub">万元</text></view>
					<img class="jb_img" :src="require('@/static/images/zcfz.png')" alt="">
				</view>
			</view> -->
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>费用控制数据统计</text>
					<view class="select_info">
						今日
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view class="card_room">
					<view class="card_item" v-for="(item,index) in list" :key="index">
						<view class="card_title" :class="[index < 2 ? '' : 'red']">
							<view class="card_icon" :class="[index < 2 ? '' : 'red']">{{index < 2 ? '门' : '住'}}
							</view>
							{{item.name}}
						</view>
						<view class="card_main">
							{{item.count}} <text class="card_sub">{{index%2 === 0 ? '人' : '元'}}</text>
						</view>
						<view class="card_com" :class="[item.yearOverYear && item.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{item.yearOverYear ? item.yearOverYear.indexOf('-') > -1 ? '' : item.yearOverYear == 0 ? '' : "+" : ''}}{{item.yearOverYear}}{{item.yearOverYear ? item.yearOverYear.indexOf('-') > -1 ? '↓' : item.yearOverYear == 0? '' : "↑" : ''}}
							<!-- 
							{{item.yearOverYear && item.yearOverYear.indexOf('-') > -1 ? '' : "+"}}{{item.yearOverYear}}{{item.yearOverYear && item.yearOverYear.indexOf('-') > -1 ? '↓' : "↑"}}
						-->
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{item.sumCurrentYear}}
							<text class="card_sub">{{index%2 === 0 ? '人' : '元'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info_tips">注：当年累计及同比均不包括当天数据</view>
		</scroll-view>

		<!--  -->
		<u-action-sheet :actions="options" :show="show" :closeOnClickAction="true"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	import progressCircle from '@/components/progress-circle'
	import {
		getOperationEfficiencyIndex
	} from '@/api/deanInquiry'
	export default {
		components: {
			progressCircle
		},
		data() {
			return {

				options: [{
					name: '今日',
					id: '1'
				}],
				curNow: 0,
				show: false,
				mzsrzb:{},
				mzsrzbStat:0,
				mzsrybzb:{},
				mzsrybzbStat:0,
				zysrzb:{},
				zysrzbStat:0,
				zysrybzb:{},
				zysrybzbStat:0,
				ylfwsrzb:{},
				ylfwsrzbStat:0,
				
				list:[]
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			getData() {
				getOperationEfficiencyIndex({
					datePattern: 0
				}).then(res => {
					console.log(res, '-------res-------------')
					this.mzsrzb = res.data.mzsrzb;
					this.mzsrzbStat = res.data.mzsrzb?.total > 0 ? parseInt((res.data.mzsrzb.yzb / res.data.mzsrzb
						.total) * 100) : 0;
					this.mzsrybzb = res.data.mzsrybzb;
					this.mzsrybzbStat = res.data.mzsrybzb?.total > 0 ? parseInt((res.data.mzsrybzb.yzb / res.data.mzsrybzb
						.total) * 100) : 0;	
					this.zysrzb = res.data.zysrzb;
					this.zysrzbStat = res.data.zysrzb?.total > 0 ? parseInt((res.data.zysrzb.yzb / res.data.zysrzb
						.total) * 100) : 0;			
					this.zysrybzb = res.data.zysrybzb;
					this.zysrybzbStat = res.data.zysrybzb?.total > 0 ? parseInt((res.data.zysrybzb.yzb / res.data.zysrybzb
						.total) * 100) : 0;
					this.ylfwsrzb = res.data.ylfwsrzb;
					this.ylfwsrzbStat = res.data.ylfwsrzb?.total > 0 ? parseInt((res.data.ylfwsrzb.yzb / res.data.ylfwsrzb
						.total) * 100) : 0;
								
					this.list = res.data.fytj;			
				})
			},
			sectionChange(index) {
				this.curNow = index;
			},
			selectClick(val) {
				console.log(val, 'val')
				this.show = false
			},
			echartsClick(params) {
				console.log('点击数据', params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dean_room {
		width: 100%;
		height: 100vh;
		background: rgba(241, 245, 248, 1); //linear-gradient(0deg, rgba(255, 255, 255, 0) 69.44%, rgba(241, 245, 248, 1) 100%);
		padding: 24rpx;

		.info_tips {
			color: #ED9164;
			font-size: 24rpx;
		}

		.info_room {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx 28rpx;

			.menuTitle {
				font-size: 36rpx;
				font-weight: 800;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.select_info {
					border: 1px solid #ddd;
					border-radius: 5px;
					font-weight: 400;
					font-size: 14px;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 8rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.menuRoom {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.menuItem {
				width: calc(100% / 4);
				text-align: center;
				height: 130rpx;
			}

			.card_room {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 12rpx;

				.card_item {
					width: calc(50% - 12rpx);
					height: 240rpx;
					border-radius: 10rpx;
					background: rgb(252, 252, 252);
					border: 1px solid rgb(221, 221, 221);

					.card_title {
						height: 74rpx;
						background: rgb(237, 242, 253);
						box-shadow: 0px 1rpx 0rpx rgb(221, 221, 221);
						text-align: center;
						line-height: 74rpx;
						font-size: 28rpx;
						font-weight: 800;
						position: relative;

						&.red {
							background: rgba(253, 240, 240);
						}

						&.zi {
							background: rgba(242, 240, 253, 1);
						}

						&.lu {
							background: rgba(229, 249, 248, 1);
						}

						.card_icon {
							position: absolute;
							width: 49rpx;
							height: 36rpx;
							border-radius: 0px 20rpx 20rpx 0px;
							background: #4E79ED;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							line-height: 36rpx;
							left: -16rpx;
							top: 12px;

							&::before {
								position: absolute;
								display: block;
								bottom: -5px;
								content: '';
								width: 14rpx;
								height: 10rpx;
								background-repeat: no-repeat;
								background-image: linear-gradient(215deg, #3053B3 50%, #fff 50%);
							}

							&.red {
								background: #ED6969;

								&::before {
									background-image: linear-gradient(215deg, #B83333 50%, #fff 50%);
								}
							}

							&.zi {
								background: #8168ED;

								&::before {
									background-image: linear-gradient(215deg, #472EB3 50%, #fff 50%);
								}
							}

							&.lu {
								background: #00BFB8;

								&::before {
									background-image: linear-gradient(215deg, #047572 50%, #fff 50%);
								}
							}
						}
					}

					.card_main {
						font-size: 42rpx;
						font-weight: 600;
						color: #04203D;
						text-align: center;
						padding: 16rpx 0 10rpx;
					}

					.card_sub {
						font-size: 24rpx;
						font-weight: 600;
						color: #7E8B9B;
					}

					.card_com {
						text-align: center;
						color: #ED6969;
						font-size: 24rpx;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

					.card_total {
						text-align: center;
						color: #04203D;
						font-size: 24rpx;
						font-weight: 600;

					}
				}
			}

			.progress_title {
				font-size: 28rpx;
				color: #04203D;
				font-weight: 600;
			}

			.progress_room {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.progress_line {
					width: calc(100% - 100rpx);
				}

				.progress_text {
					width: 100rpx;
					font-size: 36rpx;
					color: #04203D;
					text-align: right;

					.progress_icon {
						font-size: 24rpx;
						color: #7E8B9B
					}
				}
			}

			.echarts_room {
				position: relative;
				border: 1px solid #DDDDDD;
				background: #FCFCFC;
				margin-bottom: 10rpx;

				.card_com {
					margin: 20rpx 0;
					text-align: center;
					font-size: 24rpx;

					.card_sub {
						color: #ED6969;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

				}

				.progress_title {
					position: absolute;
					left: 10rpx;
				}
			}
		}

		.progressBox {
			position: relative;
			width: 240rpx;
			height: 240rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}

		.centerTxt {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #00BFB8;
				text-align: center;

				&.red {
					color: #ED6969;
				}

				&.h {
					color: #F29C66;
				}

				&.blue {
					color: #4E79ED;
				}

				.sub {
					color: #7E8B9B;
					font-size: 24rpx;
				}
			}

			.txt {
				font-size: 24rpx;
				font-weight: 400;
				color: #4A5570;
				margin-top: 10rpx;
				text-align: center;
			}

		}

		.jb_room {
			display: flex;
			gap: 16rpx;

			.jb_item {
				width: calc(100%/3);
				height: 240rpx;
				border-radius: 10rpx;
				padding: 24rpx 16rpx;
				color: #fff;
				position: relative;

				&.blue {
					background: linear-gradient(142.89deg, rgba(135, 167, 255, 1) 0%, rgba(78, 116, 242, 1) 100%);
				}

				&.green {
					background: linear-gradient(136.99deg, rgba(142, 222, 182, 1) 0%, rgba(74, 186, 132, 1) 100%);
				}

				&.red {
					background: linear-gradient(90deg, rgba(254, 139, 114, 1) 0%, rgba(255, 97, 97, 1) 100%);
				}

				.jb_title {
					font-size: 28rpx;
					font-weight: 600;
				}

				.jb_info {
					font-size: 42rpx;
					font-weight: 600;
					position: absolute;
					top: 120rpx;
					z-index: 5;

					.jb_sub {
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.jb_img {
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 1;
					width: 150rpx;
					display: block;
				}
			}
		}
	}
</style>